<template>
  <el-card class="personal-card" >
    <el-menu class="">
      <el-menu-item>
        <router-link to="/personalCentre"><span>个人中心</span></router-link>
      </el-menu-item>
      <el-menu-item>
        <router-link to="/personalCentre"><span>我的创作</span></router-link>
      </el-menu-item>
      <el-menu-item>
        <router-link to="/personalCentre"><span>订单中心</span></router-link>
      </el-menu-item>
      <div class="lines"></div>
      <el-menu-item>
        <router-link to="" @click="logout"><span>退出登录</span></router-link>
      </el-menu-item>
    </el-menu>
  </el-card>
</template>
<script>
const { logout } = require('@/services/login/login')

export default {
  // eslint-disable-next-line vue/multi-word-component-names
  name: 'Personal',
  inject: ['reload'],
  methods: {
    logout () {
      this.$router.push('/').then(() => {
        this.$store.dispatch('removeUserInfo').then(() => {
          const data = {
            number: this.$store.state.user.number
          }
          logout(data).then((res) => {
            if (res.code !== 10000) {
              this.$message.error('服务器端注销失败，用户可能已注销')
            } else {
              this.$message.success('注销成功')
            }
          })
          this.reload()
        })
      })
    }
  }
}
</script>

<style scoped lang="less">
@import "personal";
</style>
